<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
            background:lightcoral;
        }
    </style>
</head>
<body>
<canvas id="box" width="500" height="500">您的浏览器不支持画布</canvas>
<script type="text/javascript">
    var  box=document.getElementById("box");
    var pen=box.getContext("2d");
   function clock(){
//        context.drawImage(img,250,250);
        //绘制时钟
        var data=new Date();
        var hour=data.getHours();
        var min=data.getMinutes();
        var sec=data.getSeconds();
      //  alert(hour);
        hour=hour>12?hour-12:hour;
        hour+=(min/60);

        pen.clearRect(0,0,box.width,box.height);//清除画布
        //画表盘
        pen.strokeStyle="#00ffff";
        pen.lineWidth=10;
        pen.beginPath();
        pen.arc(250,250,200,0,Math.PI*2,true);
        pen.stroke();
        pen.closePath();

        //画时刻度   12个   360°  每个刻度旋转30°
        pen.save();
        pen.translate(250,250);
        pen.strokeStyle="yellow";
        pen.lineWidth=7;

        for(var i=0;i<12;i++){
            pen.rotate(Math.PI/180*30);
            pen.beginPath();
            pen.moveTo(0,-195);
            pen.lineTo(0,-175);
            pen.closePath();
            pen.stroke();
        }
        pen.restore();
        //画分刻度   60个   360°  每个刻度旋转6°
        pen.save();
        pen.translate(250,250);
        pen.strokeStyle="yellow";
        pen.lineWidth=5;

        for(var n=0;n<60;n++){
            pen.rotate(Math.PI/180*6);
            pen.beginPath();
            pen.moveTo(0,-195);
            pen.lineTo(0,-185);
            pen.closePath();
            pen.stroke();
        }
        pen.restore();

        //画时针
        pen.save();
        pen.lineWidth=7;
        pen.strokeStyle="#00ffff";
        pen.translate(250,250);
       //让时针旋转
        pen.rotate(Math.PI/180*30*hour);
        pen.beginPath();
        pen.moveTo(0,-130);
        pen.lineTo(0,10);
        pen.closePath();
        pen.stroke();
        pen.restore();

        //画分针
        pen.save();
        pen.lineWidth=5;
        pen.strokeStyle="#00ffff";
        pen.translate(250,250);
        //让分针旋转
        pen.rotate(Math.PI/180*6*min);
        pen.beginPath();
        pen.moveTo(0,-150);
        pen.lineTo(0,10);
        pen.closePath();
        pen.stroke();
        pen.restore();

        //画秒针
        pen.save();
        pen.lineWidth=3;
        pen.strokeStyle="#ff0000";
        pen.translate(250,250);
        //让秒针旋转
        pen.rotate(Math.PI/180*6*sec);
        pen.beginPath();
        pen.moveTo(0,-170);
        pen.lineTo(0,10);
        pen.closePath();
        pen.stroke();

        //画小圆
        pen.beginPath();
        pen.arc(0,0,7,0,Math.PI*2);
        pen.closePath();
        pen.strokeStyle="#ff0000";
        pen.fillStyle="#ffff00";
        pen.fill();
        pen.stroke();

        pen.beginPath();
        pen.arc(0,-140,7,0,Math.PI*2);
        pen.closePath();
        pen.strokeStyle="#ff0000";
        pen.fillStyle="#ffff00";
        pen.fill();
        pen.stroke();
        pen.restore();

    }
    clock();
    setInterval(clock,1000);

</script>
</body>
</html>